xui.Class("xui.UI.ContentBlock", "xui.UI.List", {
    Instance: {

        _afterInsertItems: function (profile) {
            profile.getSubNodes("IMAGE", true).each(function (o) {
                if (o.src == xui.ini.img_bg) {
                    // bug fix for firefox
                    if (xui.browser.isFF) o.src = '';
                    o.src = o.title;
                    o.title = '';
                }
            });
        },
        updateItemData: function (profile, item) {
            this.get(0).box._prepareItem(this.get(0), item);
            this.get(0).boxing().refresh();
        }

    },
    Initialize: function () {
        //modify default template fro shell
        var t = this.getTemplate();
        t.$submap = {
            items: {
                ITEM: {
                    tabindex: '{_tabindex}',
                    className: 'xui-uitembg xui-uiborder-radius xui-showfocus {itemClass} {disabled} {readonly}',
                    style: 'padding:{itemPadding};margin:{itemMargin};{_itemSize};{itemStyle}{_iconColor})',

                    ITEMFRAME: {
                        style: '{_inneritemSize};{_bgColor}; {_position}',
                        DATETIME: {
                            tagName: 'div',
                            className: 'xui-ui-ellipsis',
                            style: '{capDisplay} {_fontColor}',
                            text: '{datetime}',
                            $order: 0
                        },
                        TITLE: {
                            tagName: 'div',
                            className: 'xui-ui-ellipsis',
                            style: '{capDisplay}{_fontColor}',
                            text: '{_title}',
                            $order: 3,
                            IMAGE: {
                                tagName: 'img',
                                src: xui.ini.img_bg,
                                title: '{image}',
                                style: '{_innerimgSize};{imgStyle}'
                            }

                        },
                        MORE: {
                            tagName: 'div',
                            className: 'xui-ui-ellipsis',
                            style: '{capDisplay};{_moreBgColor};',
                            text: '{more}',
                            $order: 4
                        }

                    },
                    FLAG: {
                        $order: 20,
                        className: 'xui-display-none {flagClass}',
                        style: '{_flagStyle};{flagStyle};font-size:{iconFontSize}{_fontColor}',
                        text: '{flagText}'
                    },
                    EXTRA: {
                        text: '{ext}',
                        $order: 30
                    }
                }
            }
        };
        this.setTemplate(t);

        // compitable
        xui.UI.IconList = xui.UI.TitleBlock;
        var key = "xui.UI.IconList";
        xui.absBox.$type[key.replace("xui.UI.", "")] = xui.absBox.$type[key] = key;
    },
    Static: {
        IMGNODE: 1,
        Appearances: {
            EXTRA: {
                display: 'none'
            },
            KEY: {
                overflow: 'visible'
            },
            ITEMS: {
                position: 'relative',
                overflow: 'auto',
                'overflow-x': 'hidden',
                padding: "32px 0px 20px 0px",
                zoom: xui.browser.ie6 ? 1 : null
            },
            'ITEMS-nowrap': {
                'white-space': 'nowrap'
            },
            ITEM: {
                display: xui.$inlineBlock,
                zoom: xui.browser.ie67 ? 1 : null,
                position: 'relative',
                cursor: 'pointer',
                'vertical-align': 'top',
                margin: 0
            },
            ITEMFRAME: {
                display: xui.browser.ie67 ? xui.$inlineBlock : 'block',
                zoom: xui.browser.ie67 ? 1 : null,
                position: 'relative',
                overflow: 'hidden',
                border: 0,
                padding:  "10px 32px 10px 32px",
                margin: 0,
                '-moz-box-flex': '1'
            },
            IBWRAP: {},
            IMAGE: {
                display: xui.$inlineBlock,
                zoom: xui.browser.ie6 ? 1 : null,
                visibility: 'hidden',
                'vertical-align': 'middle'
            },
            DATETIME: {
                'text-align': 'left',
                overflow: 'hidden',
                "color": "#5A4F42",
                'white-space': 'nowrap',
                'font-weight': 'Regular',
                "font-size": '26px',
                "left":"0.5em",
                "line-height":"36px",
                "margin-top": "5px",
                "margin-right": "0.5em",
                "height": "36px"
            },

            TITLE: {
                "color": "#384838",
                display: 'block',
                "font-size": "28px",
                "line-height":"40px",
                "font-weight":"Medium",
                'margin-right': '0.25em',
                'text-align': 'left'
            },
            MORE: {
                "color": "#FFFFFF",
                display: 'block',
                "background-color": "#E6945C",
                'margin-top': '0.5em',
                "text-align": "center",
                'font-size': '0.75em'
            },
            FLAG: {
                "color": "#384838",
                'right': "0.5em",
                'top': "0.2em",
                'text-align': "left",

                "font-size": '26px',
                "line-height":"36px",
                "opacity": 1,
                'position': 'absolute',
                'z-index': 10
            }
        },
        Behaviors: {
            ITEMS: {
                swipeleft: function (profile, e, src) {
                    var item = profile.getItemByDom(src),
                        box = profile.boxing();

                    if (profile.swipeleft) {
                        box.swipeleft(profile, item, e, src);
                        return false;
                    }
                },
                swiperight: function (profile, item, e, src) {
                    var item = profile.getItemByDom(src),
                        box = profile.boxing();

                    if (profile.swiperight) {
                        box.swipeleft(profile, item, e, src);
                        return false;
                    }
                },
            },
            IMAGE: {
                onLoad: function (profile, e, src) {
                    var img = xui.use(src).get(0), path = img.src;
                    if (path != xui.ini.img_bg) {
                        var p = profile.properties,
                            nn = xui.use(src),
                            node = nn.get(0),
                            item = profile.getItemByDom(src);
                        if (!item) return;
                        var icon = profile.getSubNodeByItemId('ICON', item.id);
                        if (item.autoImgSize || p.autoImgSize) {
                            nn.attr('width', '');
                            nn.attr('height', '');
                        } else {
                            nn.attr('width', item.imgWidth);
                            nn.attr('height', item.imgWidth);
                        }

                        icon.removeClass('xui-icon-loading');
                        // hide
                        if (!item.iconFontCode && !item.imageClass && !item.icon) {
                            icon.addClass("xui-display-none");
                        }
                        nn.onLoad(null).onError(null).$removeEventHandler('load').$removeEventHandler('error');

                        item._status = 'loaded';
                        // don't show img_blank
                        if (xui.ini.img_blank == path) {
                            node.style.visibility = "hidden";
                            node.style.display = "none";
                        } else {
                            node.style.visibility = "visible";
                            node.style.display = "";
                        }
                    }
                },
                onError: function (profile, e, src) {
                    var item = profile.getItemByDom(src);
                    if (item._status == 'error') return;

                    var p = profile.properties,
                        nn = xui.use(src),
                        node = nn.get(0),
                        icon = profile.getSubNodeByItemId('ICON', item.id);

                    icon.removeClass('xui-icon-loading xui-display-none').addClass('xui-load-error');
                    nn.onLoad(null).onError(null).$removeEventHandler('load').$removeEventHandler('error');
                    node.style.visibility = "hidden";
                    node.style.display = "none";
                    item._status = 'error';
                }
            },
            TITLE: {
                onClick: function (profile, e, src) {
                    var item = profile.getItemByDom(src),
                        box = profile.boxing();

                    if (profile.onTitleClick) {
                        box.onTitleClick(profile, item, e, src);
                        return false;
                    }
                }
            },
            MORE: {
                onClick: function (profile, e, src) {
                    var item = profile.getItemByDom(src),
                        box = profile.boxing();

                    if (profile.onMoreClick) {
                        box.onMoreClick(profile, item, e, src);
                        return false;
                    }
                }
            }
        },

        DataModel: {
            flagText: null,
            flagClass: null,
            flagStyle: null,

            iconColors:null,
            itemColors:null,
            fontColors: null,
            moreColors:null,

            autoFontColor: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoIconColor: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoItemColor: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoImgSize: {
                ini: false,
                action: function () {
                    this.boxing().refresh();
                }
            },
            autoItemSize: {
                ini: true,
                action: function () {
                    this.boxing().refresh();
                }
            },

            iconFontSize: {
                ini: '1.5em',
                action: function (v) {
                    this.getSubNode('FLAG', true).css('font-size', v);
                }
            },

            itemMargin: {
                ini: 0,
                action: function (v) {
                    this.getSubNode('ITEM', true).css('margin', v || 0);
                }
            },
            itemPadding: {
                ini: 0,
                action: function (v) {
                    this.getSubNode('ITEM', true).css('padding', v || 0);
                }
            },
            itemWidth: {
                $spaceunit: 1,
                ini: 32,
                action: function (v) {
                    this.getSubNode('ITEMFRAME', true).width(v || '');
                }
            },
            itemHeight: {
                $spaceunit: 1,
                ini: 32,
                action: function (v) {
                    this.getSubNode('ITEMFRAME', true).height(v || '');
                }
            },
            width: {
                $spaceunit: 1,
                ini: '16rem'
            },
            height: {
                $spaceunit: 1,
                ini: '16rem'
            },
            columns: {
                ini: 0,
                action: function () {
                    this.boxing().refresh();
                }
            },
            rows: {
                ini: 0,
                action: function () {
                    this.boxing().refresh();
                }
            }
        },
        EventHandlers: {
            onCmd: null,
            onMoreClick: function (profile, item, e, src) {
            },
            onTitleClick: function (profile, item, e, src) {
            },
            touchstart: function (profile, item, e, src) {
            },
            touchmove: function (profile, item, e, src) {
            },
            touchend: function (profile, item, e, src) {
            },
            touchcancel: function (profile, item, e, src) {
            },

            swipe: function (profile, item, e, src) {
            },
            swipeleft: function (profile, item, e, src) {
            },
            swiperight: function (profile, item, e, src) {
            },
            swipeup: function (profile, item, e, src) {
            },
            swipedown: function (profile, item, e, src) {
            },


            press: function (profile, item, e, src) {
            },
            pressup: function (profile, item, e, src) {
            }
        },
        _prepareData: function (profile) {
            var d = arguments.callee.upper.call(this, profile), p = profile.properties, ns = this;
            if (p.cols) d._itemscls1 = profile.getClass('ITEMS', '-nowrap');

            xui.arr.each(d.items, function (item) {
                var index = item.index;
                if (!index) {
                    index = xui.arr.indexOf(d.items, item);
                }
                ns._autoColor(item, index, p);
            })

            return d;
        },


        _initIconColors: function (type,p ) {
            var colors = [],
                iconColors = ["#E6945C", "#46C37B", "#195ead", "#9E8CE0", "#1f8d9b", "#87CEEB", "#e04d7f"],
                fontColors = ["#E6945C", "#46C37B", "#195ead", "#9E8CE0", "#1f8d9b", "#87CEEB", "#e04d7f"],
                moreColors=["#E6945C", "#46C37B", "#195ead", "#9E8CE0", "#1f8d9b", "#87CEEB", "#e04d7f"],
                itemColors = ["#F19B60", "#49CD81", "#0277bd", "#A693EB", "#42a3af", "#B0E0E6", "#F06292"];


            switch (type) {
                case 'icon':
                    colors=iconColors;
                    if (p.iconColors && p.iconColors.length > 0) {
                        colors = p.iconColors;
                    }
                    break
                case 'font':
                    colors=fontColors;
                    if (p.fontColors && p.fontColors.length > 0) {
                        colors = p.fontColors;
                    }
                    break;
                case 'more':
                    colors=moreColors;
                    if (p.moreColors && p.moreColors.length > 0) {
                        colors = p.moreColors;
                    }
                    break;
                case 'item':
                    colors=itemColors;
                    if (p.itemColors && p.itemColors.length > 0) {
                        colors = p.itemColors;
                    }
                    break;
            }
            return colors;
        },
        _autoColor: function (item, index, p) {
            index = index || 0;

            if (p.autoFontColor||item.fontColor) {
                var fontColors=this._initIconColors('font',p);
                while (index && index > (fontColors.length - 1)) {
                    index = index -fontColors.length;
                }

                if (!item.fontColor) {
                    item.fontColor = fontColors[index];
                }
                item._fontColor = item.fontColor ? ";color:" + item.fontColor : ''
            }

            if (p.autoIconColor||item.iconColor) {
                var iconColors=this._initIconColors('icon',p);
                while (index && index > (iconColors.length - 1)) {
                    index = index -iconColors.length;
                }
                if (!item.iconColor) {
                    item.iconColor =iconColors[index];
                }
                item._iconColor = item.iconColor ? ";color:" + item.iconColor : '';
            }
            if (p.autoItemColor||item.itemColor) {

                var itemColors=this._initIconColors('item',p);
                var moreColors=this._initIconColors('more',p);
                while (index && index > (itemColors.length - 1)) {
                    index = index -itemColors.length;
                }
                if (!item.itemColor) {
                    item.itemColor = itemColors[index]
                }
                item._bgColor = item.itemColor ? ";background-color:" + item.itemColor : ''

                if (!item.moreColor) {
                    item.moreColor = moreColors[index];
                }
                item._moreBgColor = item.moreColor ? ";background-color:" + item.moreColor : ''
                item._fontColor = ';color:#ffffff'
                item._iconColor = ';color:#ffffff'
            }
        },



        _prepareItem: function (profile, item, oitem, pid, index, len) {
            var p = profile.properties,
                cols = p.columns,
                rows = p.rows,
                auto1 = item.autoItemSize || p.autoItemSize,
                t;
            this._autoColor(item, index, p);
            xui.arr.each(xui.toArr('itemWidth,position,itemHeight,imgWidth,imgHeight,itemPadding,itemMargin,iconFontSize'), function (i) {
                item[i] = xui.isSet(item[i]) ? item[i] : p[i];
            });


            item.itemWidth = (!auto1 && (t = item.itemWidth)) ? profile.$forceu(t) : '';
            item.itemHeight = (!auto1 && (t = item.itemHeight)) ? profile.$forceu(t) : '';
            item.itemMargin = (t = item.itemMargin) ? profile.$forceu(t) : 0;
            item.itemPadding = (t = item.itemPadding) ? profile.$forceu(t) : 0;
            item._tabindex = p.tabindex;

            if (item.title) {
                item._title = item.title;
            } else if (item.caption) {
                item._title = item.caption;
            }

            if (p.flagClass && !item.flagClass) {
                item.flagClass = p.flagClass;
            }
            if (p.flagStyle && !item.flagStyle) {
                item.flagStyle = p.flagStyle;
            }
            if (p.flagText && !item.flagText) {
                item.flagText = p.flagText;
            }
            //      if (t = item.iconFontSize) item._fontSize = "font-size:" + t;

            item._imageClass = '';
            if (!item.iconFontCode && !item.imageClass) item._imageClass += 'xui-icon-loading';

            if (item.imageClass) {
                item._imageClass += ' ' + item.imageClass;
            } else {
                item._imageClass = ' icon1';
            }

            // if (item.bgColor) item._bgColor = ' background-color:' + item.bgColor;
            // if (item.moreBgColor) item._moreBgColor = ' background-color:' + item.moreBgColor;
            //

            if (item.flagText || item.flagClass) item._flagStyle = 'display:block';
            if (!item.flagClass) item.flagClass = 'xui-uiflag-1';

            item._itemSize = '';
            if (cols)
                item._itemSize += 'width:' + (100 / cols + '%') + ';border:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;';
            if (rows)
                item._itemSize += 'height:' + (100 / rows + '%') + ';border:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;';

        }
        ,
        RenderTrigger: function () {
            this.boxing()._afterInsertItems(this);
        }
    }
});
